<template>
  <div>
    <el-dialog :title="data.titleName" v-model="data.children_page" :close-on-click-modal='false'
     :append-to-body='true' width="800px">
      <el-form ref="ruleFormRef" :rules="rules" :model="ruleForm" label-width="150px">
        <el-form-item label="openid：" prop="openid">
          <el-input v-model.trim="ruleForm.openid" style="width:300px;" />
        </el-form-item>
        <el-form-item label="数据1：" prop="con1">
          <el-input v-model.trim="ruleForm.con1" style="width:300px;" />
        </el-form-item>
        <el-form-item label="数据2：" prop="con2">
          <el-input v-model.trim="ruleForm.con2" style="width:300px;" />
        </el-form-item>
        <el-form-item label="数据3：" prop="con3">
          <el-input v-model.trim="ruleForm.con3" style="width:300px;" />
        </el-form-item>
        <el-form-item label="数据4：" prop="con4">
          <el-input v-model.trim="ruleForm.con4" style="width:300px;" />
        </el-form-item>
        <el-form-item label="数据5：" prop="con5">
          <el-input v-model.trim="ruleForm.con5" style="width:300px;" />
        </el-form-item>
        <el-form-item label="数据6：" prop="con6">
          <el-input v-model.trim="ruleForm.con6" style="width:300px;" />
        </el-form-item>
        <el-form-item label="数据7：" prop="con7">
          <el-input v-model.trim="ruleForm.con7" style="width:300px;" />
        </el-form-item>
        <el-form-item label="数据8：" prop="con8">
          <el-input v-model.trim="ruleForm.con8" style="width:300px;" />
        </el-form-item>
        <el-form-item label="数据9：" prop="con9">
          <el-input v-model.trim="ruleForm.con9" style="width:300px;" />
        </el-form-item>
        <el-form-item label="数据10：" prop="con10">
          <el-input v-model.trim="ruleForm.con10" style="width:300px;" />
        </el-form-item>
        <el-form-item label="累计充值：" prop="pay">
          <el-input v-model.trim="ruleForm.pay" style="width:300px;" />
        </el-form-item>
        <!-- <el-form-item label="转区额度：" prop="zone">
          <el-input v-model.trim="ruleForm.zone" style="width:300px;" />
        </el-form-item> -->
        <el-form-item label="微信签到：" prop="sign">
          <el-input v-model.trim="ruleForm.sign" style="width:300px;" />
        </el-form-item>
        <el-form-item label="拉黑："  style="width:300px;">
          <el-switch v-model="ruleForm.block" active-text="正常" :active-value="1" :inactive-value="0" active-color="#13ce66"></el-switch>
        </el-form-item> 
        <el-form-item>
          <el-button @click="data.children_page = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit(ruleFormRef)">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
// import UploadImg from "./Upload/Img.vue";
  import {
    userwxData,
  } from '../../../api/index';
  import {
    ElMessage,
    ElTree
  } from "element-plus";
  // import type { FormInstance } from 'element-plus' 
  import {
    ref,
    reactive,
    nextTick,
    // defineProps,//defineProps声明props;具备完整的类型推断;<script setup>直接可用
    // defineEmits,//defineEmits声明事件;具备完整的类型推断;<script setup>直接可用
    // defineExpose//暴露出去;<script setup>直接可用
  } from 'vue';



  const test1 = ref('')
const test2 = ref('')

  const ruleFormRef = ref();//表单ref
  //获取tree选中的值
  const treeRef = ref < InstanceType < typeof ElTree >> ();
  const emit = defineEmits(["onItemChange"]);//声明事件(父级页面上添加的 @监听事件)

  //数据双向绑定;复杂类型数据=>响应式数据
  const data = reactive({
    titleName: '',
    checkAll: false,
    children_page: false,
    isAdd: false,
    systems: [{
      name: '开发1部',
      id: 'water'
    }, {
      name: '市场部',
      id: 'pollution'
    }],
    nowKeys: [] as any[], // 属性需要做类型断言处理 //树-选中数据
    treeDatas: [], //树-总数据
    id: '',
  });
  //ts类型断言
  //定义类型
  interface User {
    type: string
    key: string
    id: string
		openid: string;
		card: string;
		pay: string;
		zone: string;
		sign: string;
		senseuser: string;
		sensedrp: string;
		contime: string;
		block:string;
		con1:string;
		con2:string;
		con3:string;
		con4:string;
		con5:string;
		con6:string;
		con7:string;
		con8:string;
		con9:string;
		con10:string;
  };
  const ruleForm = reactive({
		openid: "",
		card:  "",
		pay:  "",
		zone: "",
		sign:  "",
		senseuser: "",
		sensedrp:  "",
		contime:  "",
		block: "",
		con1: "",
		con2: "",
		con3: "",
		con4: "",
		con5: "",
		con6: "",
		con7: "",
		con8: "",
		con9: "",
		con10: "",
  });
  const rules = ref({
    username: [{
        required: true,
        message: '请输入角色名称',
        trigger: 'blur'
      },
      {
        min: 1,
        max: 50,
        message: '长度在 1 到 50 个字符',
        trigger: 'blur'
      }
    ],
    
  });
  //父调子的子
  const addItemShow = (now_name: string) => {
    data.titleName = '添加';
    data.children_page = true;
    data.isAdd = true;
    ruleForm.openid = '';
      ruleForm.con1 = '';
      ruleForm.con2 = '';
      ruleForm.con3 = '';
      ruleForm.con4 = '';
      ruleForm.con5 = '';
      ruleForm.con6 = '';
      ruleForm.con7 = '';
      ruleForm.con8 = '';
      ruleForm.con9 = '';
      ruleForm.con10 = '';
      ruleForm.pay = '';
      ruleForm.zone = '';
      ruleForm.sign = '';
      ruleForm.block = '';
    data.nowKeys = []; //树-选中数据
    nextTick(() => {
    ruleFormRef.value.resetFields();//重置表单
    })
  };
  //父调子的子
  const addItemShow2 = (row: User, now_name: string) => {
    data.titleName = '编辑';
    data.children_page = true;
    data.isAdd = false;
    nextTick(() => {
      ruleFormRef.value.resetFields();//重置表单
      ruleForm.openid = row.openid;
      ruleForm.con1 = row.con1;
      ruleForm.con2 = row.con2;
      ruleForm.con3 = row.con3;
      ruleForm.con4 = row.con4;
      ruleForm.con5 = row.con5;
      ruleForm.con6 = row.con6;
      ruleForm.con7 = row.con7;
      ruleForm.con8 = row.con8;
      ruleForm.con9 = row.con9;
      ruleForm.con10 = row.con10;
      ruleForm.pay = row.pay;
      ruleForm.zone = row.zone;
      ruleForm.sign = row.sign;
      ruleForm.block = row.block;
      data.id = row.id;
      data.nowKeys = [] //树-选中数据
      data.treeDatas = [] //树-总数据
    })
  };



  //添加/修改   : FormInstance | undefined
  const onSubmit = async (formEl:any) => {
    if (!formEl) return
    formEl.validate((valid:any) => {
      if (valid) {
        if (data.isAdd) { 
          addRoles();
        } else {
          changeRoles();
        }
      } else {
        return false;
      }
    });
  };








// ref的作用是实现响应式， 如果没有ref则不能实现响应式（引用数据类型用reactive）
        // 使用ref包裹的数据，需要通过 .value 的形式访问他的值
  const addRoles = () => { 
    let params = {
      action: 'apiadd',
      openid: ruleForm.openid,
      con1: ruleForm.con1,
      con2: ruleForm.con2,
      con3: ruleForm.con3,
      con4: ruleForm.con4,
      con5: ruleForm.con5,
      con6: ruleForm.con6,
      con7: ruleForm.con7,
      con8: ruleForm.con8,
      con9: ruleForm.con9,
      con10: ruleForm.con10,
      pay: ruleForm.pay,
      zone: ruleForm.zone,
      sign: ruleForm.sign,
      block: ruleForm.block,
     
    }
    userwxData(params).then(res => {
      if (res.status == 200) {
        ElMessage({
          showClose: true,
          message: '操作成功',
          type: 'success',
        })
        data.children_page = false;
        emit("onItemChange");
      } else if (res.status  !== 200) {
        ElMessage.error(res.statusText);
      }
    })
  };
  //修改接口
  const changeRoles = () => {
    let params = {
      action: 'apiedit',
      id: data.id,
      openid: ruleForm.openid,
      con1: ruleForm.con1,
      con2: ruleForm.con2,
      con3: ruleForm.con3,
      con4: ruleForm.con4,
      con5: ruleForm.con5,
      con6: ruleForm.con6,
      con7: ruleForm.con7,
      con8: ruleForm.con8,
      con9: ruleForm.con9,
      con10: ruleForm.con10,
      pay: ruleForm.pay,
      zone: ruleForm.zone,
      sign: ruleForm.sign,
      block: ruleForm.block,
    }
    
    userwxData(params).then(res => {
      console.log(res)
      console.log(res.status)
      if (res.status == 200) {
        ElMessage({
          showClose: true,
          message: '操作成功',
          type: 'success',
        })
        data.children_page = false;
        emit("onItemChange");
      } else if (res.status  !== 200) {
        ElMessage.error(res.statusText);
      }
    })
  };
  defineExpose({
    addItemShow,
    addItemShow2
  }) //将子组件方法暴露出来，让父组件调用
</script>
<style scoped>
  .jurisdiction-border {
    width: 500px;
    height: 300px;
    padding: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    overflow: auto;
  }
 
  .jurisdiction-border::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    background-color: rgb(241, 241, 241);
    border-radius: 3px;
  }
 
  .jurisdiction-border::-webkit-scrollbar-thumb {
    background-color: rgb(193, 193, 193);
    border-radius: 3px;
  }
 
  /* .tree-name-leave {
    margin-leave: 5px;
  } */
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>